$mode: () !default;
$mode: map-merge(
    (
        light-bg: #fff,
        dark-bg: #252528,
    ),
    $mode
);

$light-bg: map-get($mode, light-bg);
$dark-bg: map-get($mode, dark-bg);

.dark-to-light:after {
    content: '';
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    margin-left: 0;
    background-color: $dark-bg;
    opacity: 0.7;
    animation: toLight 1s linear 0s forwards;
    // pointer-events: none;
}

.light-to-dark:after {
    content: '';
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    margin-left: 0;
    background-color: $light-bg;
    opacity: 0.7;
    animation: toDark 1s linear 0s forwards;
    pointer-events: none;
}

@keyframes toLight {
    0% {
        background-color: $dark-bg;
        opacity: 0.7;
    }
    100% {
        background-color: $light-bg;
        opacity: 0;
    }
}

@keyframes toDark {
    0% {
        background-color: $light-bg;
        opacity: 0.7;
    }
    100% {
        background-color: $dark-bg;
        opacity: 0;
    }
}
